; (function ($) {
    var Domlist = '';
    var MulSelect = function (id, options) {
        var defaults = {};

        //合并重复的参数，不适用这里的参数结构
        this.options = $.extend(defaults, options);
        this.id = id;
        //节点创建
        this._createDom();

        this._add();

        this._del();

        this._sure();

        this._cancel();
    }

    var result = [];

    var liClick = function () {
        $('.ul-select').find('li').on("click", function () {
            //把之前已有的active去掉
            $(this).siblings().removeClass('remove');
            $(this).siblings().removeAttr("style");
            //当前点击的li加上class
            $(this).addClass("remove");
            $('.remove').css({ 'font-size': '17px', "color": "pink" })
        })
    }

    MulSelect.prototype = {
        _createDom: function () {
            var _this = this;
            var divMo = '<div class="mo"></div>';
            var divS = '<div class="content"></div>';

            //参数
            var data = _this.options;

            //弹框
            $("body").append(divMo);
            $("body").append(divS);
            $('.mo').css({ "position": "fixed", "left": "0", "right": "0", "top": "0", "bottom": "0", "width": "100%", "height": "100%", "background": "black", "z-index": "1", "opacity": ".5" });
            $('.content').css({ "position": "fixed", "left": "calc(50% - 200px)", "top": "calc(50% - 225px)", "z-index": "99", "width": "400px", "height": "450px", "border": "1px solid #eee", "background": "#fff" });

            var title = '<span class="title">过滤对话框</span>';
            var dlS = '<dl id="select-dl">' + '<dt>字段名称</dt>' + '<dd class="selectName"></dd>' + '<dt>操作符</dt>' + '<dd class="selectType"></dd>' + '<dt>值1</dt>' + '<dd class="selectVal1"></dd>' + '<dt>值2</dt>' + '<dd class="selectVal2"></dd>' + '</dl>';
            var divBtn = '<div class="btn">' + '<div class="add">新增</div>' + '<div class="del">删除</div>' + '</div>';
            var ulS = '<ul class="ul-select"></ul>';
            var liS = ''
            var selectV = '<select name="name" id="name"></select>';
            var selectT = '<select name="type" id="type"></select>';
            var inputV1 = '<input id="input1" type="text" />';
            var inputV2 = '<input disabled="true" id="input2" type="text" />';
            var inputD1 = '<input id="input1" type="date" />';
            var inputD2 = '<input disabled="true" id="input2" type="date" />';
            var divBtnSubmit = '<div class="btnSubmit">' + '<div id="sure">确认</div>' + '<div class="cancel">取消</div>' + '</div>';

            $('.content').append(title);
            $('.content').append(dlS);
            $('.content').append(divBtn);
            $('.content').append(ulS);
            $('.content').append(divBtnSubmit);

            $('.selectName').append(selectV);
            $('.selectType').append(selectT);

            if (window.sessionStorage) {
                $('.ul-select').append(sessionStorage.getItem(this.id))
            }

            $('.title').css({ "text-align": "center", "display": "inline-block", "width": "100%", "height": "60px", "line-height": "60px", "background": "#666", "color": "#fff" });
            $('.content').find('#select-dl').css({ "text-align": "center", "padding": "10px 0 20px 45px", "height": "20%" });
            $('#select-dl').find('dt').css({ "display": "inline-block", "width": "30%", "height": "25px", "line-height": "25px", "color": "#fff", "float": "left", "background": "#666", "border": "1px solid #eee" });
            $('#select-dl').find('dd').css({ "display": "inline-block", "width": "60%", "float": "left", "height": "25px", "line-height": "25px", "border": "1px solid #eee", "margin": "0" });
            // $('.btn').css({ "float": "left" });
            $('.add').css({ "text-align": "center", "display": "inline-block", "width": "60px", "height": "20px", "line-height": "20px", "margin-left": "20px", "background": "blue", "border-radius": "5px", "color": "#fff" });
            $('.del').css({ "text-align": "center", "display": "inline-block", "width": "60px", "height": "20px", "line-height": "20px", "margin-left": "10px", "background": "blue", "border-radius": "5px", "color": "#fff" });
            $('.ul-select').css({ "overflow": "auto", "max-height": "150px", "min-height": "100px", "width": "86%", "margin": "10px 20px", "border": "1px solid #eee", "float": "left", "list-style-type": "none", "padding": "0" });
            // $('#name').find('option').css({'text-align':'center'})
            $('#type').find('option').css({ 'text-align': 'center' })
            $('#input1').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
            $('#input2').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
            $('.btnSubmit').css({ "position": "absolute", "bottom": "10px", "left": "100px" })
            $('#sure').css({ "text-align": "center", "display": "inline-block", "width": "60px", "height": "20px", "line-height": "20px", "margin-left": "20px", "background": "blue", "border-radius": "5px", "color": "#fff" });
            $('.cancel').css({ "text-align": "center", "display": "inline-block", "width": "60px", "height": "20px", "line-height": "20px", "margin-left": "20px", "background": "#666", "border-radius": "5px", "color": "#fff" });
            $('#name').css({ 'width': '100%', 'border': '0px', 'height': '25px' });
            $('#type').css({ 'width': '100%', 'border': '0px', 'height': '25px' });
            // $('.ul-select').find('li').css({ "margin": "10px" });
            $('.remove').css({ "background": "red" })
            var vOptionList = '';
            var tOptionList = '';

            //初始化下拉框
            for (var i in data) {
                vOptionList = '<option value="' + i + '">' + i + '</option>'
                $('#name').append(vOptionList)
            }
            if ($('#type').find('option').length === 0) {
                for (var i of data[$("#name option:selected").text()]) {
                    tOptionList = '<option value="' + i + '">' + i + '</option>'
                    $('#type').append(tOptionList)
                }
                //删除最后的option
                $('#type').find('option')[$('#type').find('option').length - 1].remove()
            }

            //初始化判断input框的type属性
            var initNameSelect = data[$("#name option:selected").text()]
            if (initNameSelect[initNameSelect.length - 1] === 'text') {
                $('#input1').remove();
                $('#input2').remove();
                $('.selectVal1').append(inputV1);
                $('.selectVal2').append(inputV2);
                if ($("#type option:selected").text() === '范围') {
                    $('#input2').attr("disabled", false);
                } else {
                    $('#input2').attr("disabled", true);
                }
            } else if (initNameSelect[initNameSelect.length - 1] === 'date') {

                $('#input1').remove();
                $('#input2').remove();
                $('.selectVal1').append(inputD1);
                $('.selectVal2').append(inputD2);
                if ($("#type option:selected").text() === '范围') {
                    $('#input2').attr("disabled", false);
                } else {
                    $('#input2').attr("disabled", true);
                }
            }
            $('#input1').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
            $('#input2').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });

            //change操作符下拉框
            $('#name').change(function () {

                $('#type').find('option').remove()
                $('#input2').attr("disabled", true);
                $("#input2").val('');
                var currentName = $(this).val()
                for (var i of data[currentName]) {

                    tOptionList = '<option value="' + i + '">' + i + '</option>'

                    $('#type').append(tOptionList)

                    var len = data[currentName].length
                    if (data[currentName][len - 1] === 'date') {
                        $('#input1').remove();
                        $('#input2').remove();
                        $('.selectVal1').append(inputD1);
                        $('.selectVal2').append(inputD2);
                        $('#input1').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
                        $('#input2').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
                    } else {
                        $('#input1').remove();
                        $('#input2').remove();
                        $('.selectVal1').append(inputV1);
                        $('.selectVal2').append(inputV2);
                        $('#input1').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
                        $('#input2').css({ 'width': '100%', 'height': '25px', 'border': '0', 'padding': '0' });
                    }

                }

                //删除最后的option
                $('#type').find('option')[$('#type').find('option').length - 1].remove()
                if ($("#type option:selected").text() === '范围') {
                    $('#input2').attr("disabled", false);
                } else {
                    $('#input2').attr("disabled", true);
                    $("#input2").val('');
                }

            });

            $('#type').bind("change", function () {
                if ($("#type option:selected").text() === '范围') {
                    $('#input2').attr("disabled", false);
                } else {
                    $('#input2').attr("disabled", true);
                    $("#input2").val('');
                }
            })

            liClick();
        },

        //添加
        _add: function () {

            //新增
            $('.add').click(function () {
                if ($("input[id=input1]").val() === '') {
                    alert('值1不可为空')
                } else if ($("#type option:selected").text() === '范围') {
                    if ($("input[id=input2]").val() === '') {
                        alert('值2不可为空')
                    } else {
                        liS = '<li>' + $("#name option:selected").text() + $("#type option:selected").text() + $("input[id=input1]").val() + '_' + $("input[id=input2]").val() + '</li>'
                        $('.ul-select').append(liS)
                        //清空input值
                        $("#input1").val('')
                        $("#input2").val('')
                    }
                } else {
                    liS = '<li>' + $("#name option:selected").text() + $("#type option:selected").text() + $("input[id=input1]").val() + '</li>'
                    $('.ul-select').append(liS)
                    //清空input值
                    $("#input1").val('')
                }

                liClick();
            })
        },

        //删除
        _del: function () {
            //删除
            $('.del').click(function () {
                var _this = this;
                $('.remove').remove();
            })

        },

        //确定
        _sure: function () {
            var _this = this;
            var arr = [];
            // 确认
            $('#sure').click(function () {
                result = [];
                $.each($('.ul-select').find('li'), function (i, item) {
                    arr.push('<li>' + item.innerHTML + '</li>')
                    Domlist = arr.join('');
                    result.push(item.innerHTML)
                })
                $('.mo').remove();
                $('.content').remove();
                sessionStorage.setItem(_this.id, Domlist)
                return result;
            })
        },

        //取消
        _cancel: function () {
            //取消
            $('.cancel').click(function () {
                $('.mo').remove();
                $('.content').remove();
            })
        }
    }

    $.fn.MulSelect = function (id, options) {
        new MulSelect(id, options);
    }
    $.fn.result = function () {
        return result
    }
})(jQuery)